<!DOCTYPE html>
<html style="height: 100%" lang="">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>粒粒皆辛苦</title>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script src="./js/axios.min.js"></script>
</head>

<body style="height: 100%; margin: 0; overflow: hidden">
<div id="container" style="height: 80%; width: 80%; margin: 5% auto"></div>
<script>
    const dom = document.getElementById("container");
    let option;
    const myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
    });
    let initCharts = () => {
        option = {
            title: {
                text: "近五年 x 市粮食总产量分布以及 2022 年粮食产量比例",
                subtext: "单位（万吨）",
            },
            dataset: {
                //source -> 图表显示所需的数据格式（饼形图和折线图共用），请勿手动修改此行
                source: [
                    ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
                    ["小麦", 1, 1, 1, 1, 1, 1],
                    ["大豆", 9, 9, 9, 9, 9, 9],
                    ["马铃薯", 13, 13, 13, 13, 13, 13],
                    ["玉米", 23, 23, 23, 23, 23, 23],
                ],
            },
            xAxis: {type: "category"},
            yAxis: {gridIndex: 0},
            grid: {top: "55%"},
            series: [
                {
                    type: "line",
                    seriesLayoutBy: "row",
                },
                {
                    type: "line",
                    seriesLayoutBy: "row",
                },
                {
                    type: "line",
                    seriesLayoutBy: "row",
                },
                {
                    type: "line",
                    seriesLayoutBy: "row",
                },
                {
                    type: "pie",
                    id: "pie",
                    radius: "30%",
                    center: ["50%", "25%"],
                    label: {
                        // 2022 数据的百分比
                        formatter: "{b} {@2022} ({d}%)",
                    },
                    encode: {
                        itemName: "全部",
                        value: "2022",
                        tooltip: "2022",
                    },
                },
            ],
        };
        if (option && typeof option === "object") {
            // myChart.setOption -> 设置 echarts 数据的方法
            myChart.setOption(option);
        }
        window.addEventListener("resize", myChart.resize);
    };
    initCharts();

    // TODO: 待补充代码
    axios.get('./js/data.json').then(res => {
        let data = res.data.data;
        let source = [
            ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
            ["小麦"],
            ["大豆"],
            ["马铃薯"],
            ["玉米"],
        ]
        for (let item in data) {
            source[1].push(data[item].wheat);
            source[2].push(data[item].soybean);
            source[3].push(data[item].potato);
            source[4].push(data[item].corn);
        }
        option.dataset.source = source;
        myChart.setOption(option);
    })
</script>
</body>
</html>
